<template>
  <div>
    <div>
      <!-- v-on用于绑定事件 -->
      <!-- v-on语法：v-on:事件触发类型 -->
      <!-- 第一种写法：v-on:事件名=“要执行的少量代码" -->
      <!-- <button v-on:click="num += 1">按钮</button> -->
      <!-- 第二种写法   v-on:事件名=“methods中的函数名" -->
      <!-- <button v-on:click="fn">按钮</button> -->
      <!-- 第三种写法 v-on:事件名=“methods中的函数名(实参)" -->
      <!-- <button v-on:click="fn1(12)">按钮</button> -->
      <!-- v-on可以缩写成@ -->
      <!-- <button @click="fn1(10)">num加十</button> -->
      <button @click="salary(3000)">发工资啦，我的工资是3000</button
      ><br /><br />
      <button @click="salary(-2800)">给喜欢的女主播刷了火箭-2800</button
      ><br /><br />
      <button @click="salary(10000)">送外卖赚了10000</button><br /><br />
      <button @click="salary(-18000)">给暗恋的女生买了爱马仕-18000</button
      ><br /><br />
      <button @click="salary(8000)">晚上去做代驾赚了8000</button><br /><br />
      <button @click="salary(-100)">买泡面100</button><br /><br />
      <button @click="salary(-50)">买挂逼水50</button><br /><br />

      <!-- <p>我这个月还有{{num}}元</p> -->

      <!-- <input type="text" @blur='fn'> -->
      <div class="box" @mouseenter="fn"></div>
    </div>
  </div>
</template>

<script>
//之前的写法 不能这么写了
// document.querySelector('button').addEventListener('click',function(){
//     console.log(1);
// })
export default {
  //该vue组件的数据源
  data() {
    return {
      num: 0,
      str: '我是data中的str',
    }
  },

  //methods 用来存放事件,methods是一个对象，里面存放了需要触发的事件
  //千万别写成method，事件很多，所以是复数形式后面跟上s
  //事件和事件之间用，隔开
  methods: {
    fn() {
      //在methods当中的函数体里面要使用data中的数据的时候一定要带this
      //this指的是该组件实例
      // console.log(this);
      console.log(this.str)
    },

    fn1(num) {
      this.num += num
    },

    //工资函数
    salary(a) {
      //控制data中的num，要用到this
      this.num += a
    },
  },
  watch: {
    //监听money的变化，只要money一旦发生改变，就会调用下面的函数
    money(newVal, oldVal) {
      alert('余额为' + newVal, '原来有' + oldVal)
    },
  },
}
</script>

<style scoped>
.box {
  width: 500px;
  height: 500px;
  background-color: #087;
}
</style>
